{% extends 'starter.html' %}
{% import 'public.html' as public %}


<!--導航-->
{% block navbar_left %}
<li class="nav-item">
    <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
</li>
<li class="nav-item d-none d-sm-inline-block">
    <a href="#" class="nav-link text-primary" data-toggle="modal" data-target="#LoginModal"><i class="fas fa-sign-in-alt"></i> 登入系統</a>
</li>
{% endblock %}


<!--右側功能-->
{% block navbar_right %}
<li class="nav-item d-none d-sm-inline-block" id="Clock">
    <span style="font-size: xx-large;font-weight: bolder;">{[ AppDateTime ]}&nbsp;</span>
    <span class="badge badge-secondary" style="font-size: x-large;font-weight: bolder;">{[ AppWeekDay ]}</span>
</li>
<!-- Full Screen -->
<li class="nav-item">
<a class="nav-link" data-widget="fullscreen" href="#" role="button" id="fullscreen_bt" title="全屏幕">
    <i class="fas fa-expand-arrows-alt fa-2x"></i>
</a>
</li>
{% endblock %}

<!--功能菜單-->
{% block sidebar_menu %}
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
    <li class="nav-item menu-open">
    <a href="#" class="nav-link active"><i class="nav-icon fas fa-tachometer-alt"></i><p>車牌識別<i class="right fas fa-angle-left"></i></p></a>
    <ul class="nav nav-treeview">
        <li class="nav-item">
        <a href="#" class="nav-link active"><i class="far fa-circle nav-icon"></i><p>車牌識別預覽</p></a>
        </li>
    </ul>
    </li>
</ul>
{% endblock %}


<!--彈窗-->
{% block modals %}
{{ super() }}
{{ public.custom_info(custom) }}

<div class="modal fade" id="LoginModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header justify-content-center">
                <a href="#" class="h2"><b>{{custom.Company}}</b>停車場管理系統</a>
            </div>
            <form id="LoginForm">
            <div class="modal-body">
                <p class="login-box-msg">請輸入用戶名和密碼登入系統</p>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text"><i class="fas fa-user"></i></span>
                    </div>
                    <input v-model="AuthInfo.LoginName" type="text" class="form-control" placeholder="用戶名" name="LoginName" style="font-size: larger;">
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text"><i class="fas fa-lock"></i></span>
                    </div>
                    <input v-model="AuthInfo.Password" type="password" class="form-control" placeholder="密碼" name="Password">
                </div>
                <div class="row">
                    <div class="col-8">
                    <div class="icheck-primary">
                        <input v-model="AuthInfo.Remember" type="checkbox" name="Remember">
                        <label for="remember">記住我</label>
                    </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer justify-content-between">
                <button type="submit" class="btn btn-primary">登錄</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
            </form>
        </div>
    <!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
{% endblock %}

<!--頁面脚本-->
{% block scripts %}
{{ super() }}
{{ public.public_scripts(carpark_datetime) }}
<script>
    // 登錄信息
    var LoginAuth = new Vue({
        el: '#LoginModal',
        delimiters: ['{[', ']}'],
        data: {
            AuthInfo: {LoginName: '' , Password: '', Remember: false}
        },
        methods: {
            // 登录认证
            commit_auth_info(){
                axios.post("{{ url_for('auth.auth_user') }}", {AuthInfo: this.AuthInfo})
                .then(response => {
                    if(response.status==200){
                        let ret = response.data
                        AppMessage.fire({icon: ret.icon, text: ret.text})
                        if(ret.icon=='success'){
                            $("#LoginModal").modal('toggle')
                            let redirect = 'window.location.href =' + '' + ret.redirect
                            setTimeout(redirect, 2200)
                        }
                    }else{AppMessage.fire({icon: 'error', text: '請求錯誤，請聯係管理員'})}
                })
                .catch(function (error) {alert(error)})
            },
        },
        mounted: function() {
            // 登录信息校验
            $('#LoginForm').validate({
                rules: {LoginName: {required: true},Password: {required: true}},
                errorElement: 'span',
                errorPlacement: function (error, element) {
                    error.addClass('invalid-feedback');
                    element.closest('.input-group').append(error);
                },
                highlight: function (element, errorClass, validClass) {$(element).addClass('is-invalid')},
                unhighlight: function (element, errorClass, validClass) {$(element).removeClass('is-invalid')},
                submitHandler: function (){LoginAuth.commit_auth_info()},
            });
        }
    });
</script>
{{ public.carpark_style() }}
{% endblock %}

